<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="component/pear/css/pear.css" />
  <!-- 依 赖 脚 本 -->
  <script src="component/layui/layui.js"></script>
  <script src="component/pear/pear.js"></script>
  <style type="text/css">



   
  </style>
  <title>Sheet1</title>
</head>

<body>
  <div>
    hello wrold
  </div>
  <div id="tplTestView1"></div>
  <script id="tpl1" type="text/html">
    <h3>{{=d.name}}</h3>
    <p>性别：{{= d.sex ? '男' : '女' }}</p>
  </script>  
  <div id="tplTestView2"></div>

  <script id="tpl2" type="text/html">
    <div>
      {{# layui.each(d,function(index,item){ }}
      {{# console.log(item) }}
      <table border="0" cellpadding="0" cellspacing="0" class="sheet0 gridlines">
        <col class="col0">
        <col class="col1">
        <col class="col2">
        <col class="col3">
        <col class="col4">
        <tbody>
          <tr class="row0">
            <td class="column0 style10 null style10"></td>
            <td class="column1 style8 s style8">1列</td>
            <td class="column2 style8 s style8">2列</td>
            <td class="column3 style8 s style8">3列</td>
            <td class="column4 style8 s style8">4列</td>
          </tr>
          <tr class="row2">
            <td class="column0 style1 s">Lot No.</td>
            <td class="column1 style5 null style7" colspan="4">{{= item.usmBtRecord.lotNo}}</td>
          </tr>
          <tr class="row3">
            <td class="column0 style1 s">形名</td>
            <td class="column1 style2 null">{{=item.usmBtRecord.zlMachineNo}}</td>
            <td class="column2 style5 null style7" colspan="3">{{=item.usmBtRecord.productCode}}</td>
          </tr>
        </tbody>
      </table>
      {{#  }) }}
    </div>
  </script>
  <div class="originTable" style="margin-top: 100px;">
    <table border="0" cellpadding="0" cellspacing="0" class="sheet0 gridlines">
      <col class="col0">
      <col class="col1">
      <col class="col2">
      <col class="col3">
      <col class="col4">
      <tbody>
        <tr class="row0">
          <td class="column0 style10 null style10"></td>
          <td class="column1 style8 s style8">1列</td>
          <td class="column2 style8 s style8">2列</td>
          <td class="column3 style8 s style8">3列</td>
          <td class="column4 style8 s style8">4列</td>
        </tr>
        <tr class="row2">
          <td class="column0 style1 s">Lot No.</td>
          <td class="column1 style5 null style7" colspan="4"></td>
        </tr>
        <tr class="row3">
          <td class="column0 style1 s">形名</td>
          <td class="column1 style2 null"></td>
          <td class="column2 style5 null style7" colspan="3"></td>
        </tr>
        <tr class="row4">
          <td class="column0 style1 s">良品总数</td>
          <td class="column1 style5 null style7" colspan="4"></td>
        </tr>
        <tr class="row5">
          <td class="column0 style1 s">每列良品数</td>
          <td class="column1 style3 null"></td>
          <td class="column2 style3 null"></td>
          <td class="column3 style3 null"></td>
          <td class="column4 style3 null"></td>
        </tr>
        <tr class="row6">
          <td class="column0 style1 s">检查机不良</td>
          <td class="column1 style3 null"></td>
          <td class="column2 style3 null"></td>
          <td class="column3 style3 null"></td>
          <td class="column4 style3 null"></td>
        </tr>
        <tr class="row7">
          <td class="column0 style1 s">列不良率</td>
          <td class="column1 style3 null"></td>
          <td class="column2 style3 null"></td>
          <td class="column3 style3 null"></td>
          <td class="column4 style3 null"></td>
        </tr>
        <tr class="row8">
          <td class="column0 style1 s">合计不良率</td>
          <td class="column1 style5 null style7" colspan="4"></td>
        </tr>
        <tr class="row9">
          <td class="column0 style1 s">机械不良</td>
          <td class="column1 style3 null"></td>
          <td class="column2 style3 null"></td>
          <td class="column3 style3 null"></td>
          <td class="column4 style3 null"></td>
        </tr>
        <tr class="row10">
          <td class="column0 style4 s">研磨材更换盖章确认</td>
          <td class="column1 style5 null style7" colspan="4"></td>
        </tr>
      </tbody>
    </table>
  </div>
  

<script>
  var json = [
    {
      "usmBtRecord": {
        "recordID": 1,
        "machineNo": "DBSU-09",
        "lotNo": "2405D1005N",
        "productCode": "1SS355 TE-17",
        "recordTimeDT": "2024-02-04",
        "zlMachineNo": "ZULI-07",
        "okCount1": 123,
        "ngCount1": 1,
        "jxngCount1": 123,
        "okCount2": 1312,
        "ngCount2": 3,
        "jxngCount2": 113,
        "okCount3": 4123,
        "ngCount3": 565,
        "jxngCount3": 6,
        "okCount4": 765,
        "ngCount4": 5,
        "jxngCount4": 5,
        "ymcCheck": "2200958"
      },
      "ymcCheckUser": {
        "userID": 6,
        "userCode": "2200958",
        "userFullName": "隋宇",
        "userPassword": null,
        "roleID": 11,
        "enabled": true,
        "deleted": null
      }
    },
    {
      "usmBtRecord": {
        "recordID": 2,
        "machineNo": "DBSU-09",
        "lotNo": "2405D1019N",
        "productCode": "1SS355 TE-17",
        "recordTimeDT": "2024-02-04",
        "zlMachineNo": "ZULI-07",
        "okCount1": 423,
        "ngCount1": 42,
        "jxngCount1": 12,
        "okCount2": 5435,
        "ngCount2": 32,
        "jxngCount2": 41,
        "okCount3": 4444,
        "ngCount3": 123,
        "jxngCount3": 33,
        "okCount4": 765,
        "ngCount4": 5,
        "jxngCount4": 5,
        "ymcCheck": null
      },
      "ymcCheckUser": null
    }
  ]
  layui.use(function(){
    var laytpl = layui.laytpl
    let tplData1 = {
      name: "张三",
      sex: 1,
    };
    // 1.获取模板html
    let getTpl = document.getElementById('tpl1').innerHTML
    // 2.获取视图对象
    let tplview= document.getElementById('tplTestView1')
    laytpl(getTpl).render(tplData1, function(html){
      // 3.将html(渲染后的html)渲染到视图对象中
      tplview.innerHTML = html
    })

     // 1.获取模板html
     let getTpl2 = document.getElementById('tpl2').innerHTML
     // 2.获取视图对象
     let tplview2= document.getElementById('tplTestView2')
     laytpl(getTpl2).render(json, function(html){
       // 3.将html(渲染后的html)渲染到视图对象中
       tplview2.innerHTML = html
     })
  })
</script>
</body>

</html>